<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>520猜歌</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>

    <div id="web">
        <!-- 加载页 -->
        <div id="loadingP" class="page_loading" >
            <img src="./img/star.png" alt="" class="stars">
            <div class="protagonist">
                <img src="./img/protagonist.png">
            </div>
            <div class="arrow">
                <img src="./img/arrow.png" alt="">
            </div>
            <div class="arrows">
                <p>Loading <a class="baifenbi"></a></p>
            </div>
            <div class="earth">
                <img src="./img/earth.png">
            </div>
            <div class="please">
                <img src="./img/pleaseWearEar.png" alt="">
            </div>
        </div>
        <!-- 开始页 -->
        <div id="pageStart" style="display: none;">
            <div class="light lg1"></div>
            <div class="light lg2"></div>
            <div class="light lg3"></div>
            <div class="light lg4"></div>
            <div class="light lg5"></div>
            <div class="light lg6"></div>
            <div class="logo">
                <img src="./img/KuGouLog.png" alt="">
            </div>
            <div class="theme">
                <img src="./img/index_625secguess.png" alt="">
            </div>
            <div class="mouth">
                <div class="mouthing">
                    <img src="./img/mouth.png" alt="" class="pulse">
                </div>
                <div class="whatSong">
                    <img src="./img/whatSong.png" alt="">
                </div>
            </div>
            <div class="mans">
                <img src="./img/sixQuery.png" alt="" class="swing">
                <img src="./img/man_left.png" alt="">
                <img src="./img/man_right.png" alt="">
                <img src="./img/what.png" alt="" class="what w1">
                <img src="./img/what.png" alt="" class="what w2">
                <img src="./img/what.png" alt="" class="what w3">
                <img src="./img/what.png" alt="" class="what w4">
            </div>
            <div class="p1_btn clearfix">
                <div class="btn right" id="goOpen">
                    <img src="./img/index_start.png" alt="" class="tada">
                </div>
            </div>
        </div>
        <!-- 游戏页 -->
        <div id="pageGame" style="display: none;">
            <div id="levelBox">
                <div class="level" data-level="1">
                    <div class="circle circle1"></div>
                    <div class="circle circle2"></div>
                    <div class="circle circle3"></div>
                    <div class="circle circle4"></div>
                    <div class="circle circle5"></div>
                    <div class="disk" data-level="1">
                        <div class="movieHitSong people_anim">
                            <img src="./img/movieHitSong.png" alt="">
                        </div>
                        <div class="people people_anim">
                            <img src="./img/movieHitSongpeople.png" alt="">
                        </div>
                        <div class="movieHitSongCityWall">
                            <img src="./img/movieHitSongCityWall.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="level" data-level="2">
                    <div class="light lg1"></div>
                    <div class="light lg2"></div>
                    <div class="light lg3"></div>
                    <div class="light lg4"></div>
                    <div class="light lg5"></div>
                    <div class="light lg6"></div>
                    <div class="disk" data-level="2">
                        <div class="lightDiv">
                            <img src="./img/lightearth.png" alt="">
                        </div>
                        <div class="middle">
                            <div class="audi1 people_anim">
                                <img src="./img/wow.png" alt="" class="wow1">
                                <img src="./img/audienceLeft.png" alt="" class="audis1">
                            </div>
                            <div class="audi2">
                                <img src="./img/wow2.png" alt="" class="wow2">
                                <img src="./img/audienceRight.png" alt="" class="audis2">
                            </div>
                            <div class="songer">
                                <img src="./img/stage.png" alt="" class="stage">
                                <img src="./img/songer.png" alt="" class="songer1 singer_anim">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="level" data-level="3">
                    <div class="circle circle1 tmps"></div>
                    <div class="circle circle2 tmps"></div>
                    <div class="circle circle3 tmps"></div>
                    <div class="circle circle4 tmps"></div>
                    <div class="circle circle5 tmps"></div>
                    <div class="disk" data-level="3">
                        <div class="lightDiv">
                            <img src="./img/lightearth.png" alt="">
                        </div>
                        <div class="WCwall">
                            <img src="./img/WCwalls.png" alt="">
                        </div>
                        <div class="watchpeos">
                            <img src="./img/watchpeos.png" alt="" class="watchpeos_anim">
                        </div>
                        <div class="sangBan">
                            <img src="./img/sangBan1.png" alt="">
                            <img src="./img/sangBan2.png" alt="">
                        </div>
                        <div class="jianfeizaozhe">
                            <img src="./img/feiZhao.png" alt="" class="feizhao feizhao_anim">
                            <img src="./img/jianfeizaode.png" alt="" class="jianfeizaode">
                        </div>
                    </div>
                </div>
                <div class="level" data-level="4">
                    <div class="circle circle1"></div>
                    <div class="circle circle2"></div>
                    <div class="circle circle3"></div>
                    <div class="circle circle4"></div>
                    <div class="circle circle5"></div>
                    <div class="disk" data-level="4">
                        <div class="lightDiv">
                            <img src="./img/lightearth.png" alt="">
                        </div>
                        <div class="threeYao">
                            <img src="./img/threeYao.png" alt="" class="threeYao_anim">
                        </div>
                        <div class="car">
                            <img src="./img/car.png" alt="">
                        </div>
                        <div class="hua">
                            <img src="./img/hua.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="level" data-level="5">
                    <div class="circle circle1"></div>
                    <div class="circle circle2"></div>
                    <div class="circle circle3"></div>
                    <div class="circle circle4"></div>
                    <div class="circle circle5"></div>
                    <div class="disk" data-level="5">
                        <div class="lightDiv rightto">
                            <img src="./img/lightearth.png" alt="">
                        </div>
                        <div class="juhualeft">
                            <img src="./img/juhualeft.png" alt="">
                        </div>
                        <div class="juhuaright">
                            <img src="./img/juhuaright.png" alt="">
                        </div>
                        <div class="oldman">
                            <img src="./img/oldman.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="level myLevelBg6" data-level="6">
                    <div class="disk" data-level="6">
                        <div class="tallcontent">
                            <img src="./img/wogeiyou.png" alt="" class="tallcontent_anim">
                        </div>
                        <div class="woman">
                            <img src="./img/wuman.png" alt="">
                        </div>
                        <div class="man">
                            <img src="./img/man.png" alt="" class="man_anim">
                        </div>
                    </div>
                </div>
            </div>
            <div class="itemBox">
                <div class="item selectA" data-answer></div>
                <div class="item selectB" data-answer></div>
                <div class="item selectC" data-answer></div>
                <div class="next">
                    <div class="smallMouth smallMouthDo">60s</div>
                </div>
            </div>
            <div class="AudioBox" style="display: none;visibility: hidden;"></div>
            <div class="tips" style="display: none;">请先听两秒</div>

        </div>
        <!-- 结果页 -->
        <div id="pageScore" style="display: none;">
            <div class="top">
                <div class="user">
                    <div class="touxiang">
                        <img src="./img/touxinag.png" alt="" class="res_userHead">
                    </div>
                    <span class="res_userName userName">咸猪手</span>
                </div>
                <div class="logo">
                    <img src="./img/KuGouLog.png" alt="">
                </div>
            </div>
            <div class="medal">
                <div>
                    <img src="./img/huangjin.png" id="medalImg">
                </div>
                <p>猜中<span id="res_score">10</span>首</p>
            </div>
            <div class="textcontent res_textcontent"></div>
            <div class="buttons">
                <a id="again">再次挑战</a>
                <a class="toShare">分享朋友圈</a>
            </div>
            <div class="rankBox">
                <div class="pengyouquantitle">
                    <img src="./img/paiming_title.png" alt="">
                </div>
                <div class="list">
                    <ul>
                        <li>
                            <div class="rankHead">
                                <img src="./img/huangjin.png" alt="" class="rankHeadImg">
                            </div>
                            <div class="rankInfo clearfix">
                                <div class="left">
                                    <p class="rankName">咸猪手</p>
                                    <div>
                                        <img src="./img/huangjin.png" alt="" class="gradePic">
                                        <span class="rankNum">黄金</span>
                                    </div>
                                </div>
                                <div class="right">
                                    <p>猜中<span class="scoreArr">20</span>首歌</p>
                                    <p class="upTime">0分钟前</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="rankHead">
                                <img src="./img/huangjin.png" alt="">
                            </div>
                            <div class="rankInfo clearfix">
                                <div class="left">
                                    <p class="rankName">酷狗用户1</p>
                                    <div>
                                        <img src="./img/huangjin.png" alt="" class="gradePic">
                                        <span class="rankNum">黄金</span>
                                    </div>
                                </div>
                                <div class="right">
                                    <p>猜中<span>20</span>首歌</p>
                                    <p class="upTime">20分钟前</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="rankHead">
                                <img src="./img/huangjin.png" alt="">
                            </div>
                            <div class="rankInfo clearfix">
                                <div class="left">
                                    <p class="rankName">酷狗用户2</p>
                                    <div>
                                        <img src="./img/huangjin.png" alt="" class="gradePic">
                                        <span class="rankNum">黄金</span>
                                    </div>
                                </div>
                                <div class="right">
                                    <p>猜中<span>20</span>首歌</p>
                                    <p class="upTime">20分钟前</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 分享朋友圈 -->
        <div class="ydShare" style="display: none">
            <img src="./img/yd.png" alt="">
        </div>
    </div>
    <!--<script src="js/vconsole.min.js"></script>-->
    <!--<script>var vConsole = new VConsole();console.log('Hello world');</script>-->
    <script src="js/common.js"></script>
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/web.js"></script>
    <script src="js/preloadjs.min.js"></script>

</body>
</html>